<template>
  <div class="room">
    <div class="search">
    <!-- <span>房型</span>
      <el-select size="small" v-model="roleId" placeholder="请选择房型">
          <el-option
            v-for="item in typeList"
            :key="item.roomTypeId"
            :label="item.roomTypeName"
            :value="item.roomTypeId"/>
        </el-select> -->
          <el-button type="primary" size="small" @click="editRef.drawer=true">添加</el-button>
    </div>
    <el-table size="small" :data="list" style="width: 98%">
      <!-- <el-table-column prop="id" label="编号" width="100" /> -->
      <el-table-column prop="hotelId" label="酒店" width="200" />
      <el-table-column prop="typeName" label="房型" width="100" />
      <el-table-column prop="description" label="	描述" width="100" />
      <el-table-column prop="price" label="	价格" width="100" />
      <el-table-column prop="maxGuest" label="	最大住客" width="100" />
      <el-table-column prop="imageUrl" label="	图片" width="100" >
      <template #default="scope">
          <el-image v-if="scope.row.imageUrl" style="width: 60px; height: 60px" :src="scope.row.imageUrl" fit="cover" />
          <el-image v-else style="width: 60px; height: 60px" src="imgs/default.png" fit="cover" />
        </template>
        </el-table-column>

      <el-table-column label="操作">
        <!-- <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row.roomTypeId)">编辑</el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row.roomTypeId)">删除</el-button>
        </template> -->
      </el-table-column>
    </el-table>
        <!-- <el-pagination style="margin-top: 5px;" small background layout="prev, pager, next" 
    :total="list.length" v-model:current-page="pageIndex" /> -->
      <!-- <EditRoomType ref='editRef'></EditRoomType> -->
  </div>
</template>

<script setup lang="ts">
import {ref,onMounted,computed} from 'vue'
import {$list,$getOne,$delete} from '../../api/roomType.js'
import { ElMessageBox,ElNotification } from 'element-plus'
import EditRoomType from '../../components/room/EditRoomType.vue'

// 房型列表
let list = ref([])
// 页码
let pageIndex = ref(1)
// // 显示的列表
// let showList = computed(()=>{
//   return list.value.slice((pageIndex.value-1)*10,pageIndex.value*10)
// })
// 加载房型列表
const loadList = async ()=>{

  let ret = await $list()
  console.log(ret.data.roomType.records);
  
  list.value = ret.data.roomType.records
}

// 表单数据
let formData = ref({
  roomId: "",
  typeId: "",
  hotelId: "",
  roomNumber: "",
  status: "",
  cleanStatus: "",
  typeName: "",
  description: "",
  price: 0,
  maxGuest: 0,
  imageUrl: "",
  checkInDate: "",
  checkOutDate: "",
  page: 0,
  size: 0

})


// 定义编辑组件ref对象
let editRef = ref(null)

// // 编辑方法
// const handleEdit = async (roomTypeId:number)=>{
//   let ret = await $getOne({roomTypeId})
//   editRef.value.formData = ret
//   editRef.value.drawer = true
// }
// // 删除方法
// const handleDelete = (roomTypeId:number)=>{
//   ElMessageBox.confirm(
//     '确定删除吗？',
//     '提示',
//     {
//       confirmButtonText: '确定',
//       cancelButtonText: '取消',
//       type: 'warning',
//     }
//   )
//   .then(async () => {
//     let ret = await $delete({roomTypeId})
//     if(ret.success){
//         ElNotification({
//           title: '提示',
//           message: ret.message,
//           type: 'success',
//         })
//         // 重新加载列表
//         loadList()
//       }else{
//         ElNotification({
//           title: '提示',
//           message: ret.message,
//           type: 'error',
//         })
//       }
//   })
//   .catch(() => {})
// }

onMounted(()=>{
  loadList()
})


</script>

<style lang="scss" scoped>

</style>